<template>
  <el-container style="height: 100vh; overflow: hidden">
    <el-header class="custom-header">
      <span style="color: rgb(245, 245, 245)"
        >人机增强多智能体量化评估与演化</span
      >
      
    </el-header>
    <el-main style="background-color: rgb(33, 108, 157)" class="main-content">    
      <el-row style="margin-top:200px;">
        <el-col :span="8">

        </el-col>
        <el-col :span="8">
           <el-card class="center-card">
            <div slot="header" class="clearfix">
              <span style="margin-left:180px;">登录</span>
            </div>
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="120px" style="margin-top:20px;">  
                <el-form-item label="用户名" prop="username" style="color: rgb(96,235,232);">  
                <el-input v-model="loginForm.username" style="width:260px;" />  
                </el-form-item>  
                <el-form-item label="密码" prop="password">  
                <el-input type="password" v-model="loginForm.password" style="width:260px;" />  
                </el-form-item>  
                <el-form-item>  
                <el-button type="primary" @click="handleSubmit">登录</el-button>  
                <el-button @click="handleReset">取消</el-button>  
                </el-form-item>  
            </el-form> 
            <el-dialog v-model="dialogVisible" title="提示" width="30%">
              <span>用户名或密码错误</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                </span>
              </template>
            </el-dialog>
        </el-card>  
        </el-col>  
      </el-row>   
    </el-main>
  </el-container>
</template>  
  
<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import type { ImageProps } from "element-plus";
import axios from "axios";
import {useRouter} from 'vue-router'
import {BASE_URL} from '@/utils/common.js'
import store from '@/vuex/store'

const router = useRouter()
// 响应式数据  
const loginForm = ref({  
  username: '',  
  password: ''  
});  
 
const dialogVisible = ref(false) 
const handleSubmit = async ()=>{
  
   const response = await axios.post(BASE_URL+"/login",
   {user_name:loginForm.value.username,password:loginForm.value.password})
   if(response.data.code==200){
      store.commit('add',response.data.data)
      router.push('/mainbox')
   }else{
      dialogVisible.value=true
   }
  //  if(loginForm.value.username==='admin' && loginForm.value.password==='123456'){
  //    router.push('/mainbox')
  //  }else{
  //     dialogVisible.value=true
  //  }
}

// 验证规则（这里只是示例，并未实际添加验证逻辑）  
const rules = {  
  username: [  
     { required: true, message: '请输入用户名', trigger: 'blur' }  
  ],  
  password: [  
     { required: true, message: '请输入密码', trigger: 'blur' }  
  ]  
}; 

</script>  
  
<style scoped lang="scss">
::v-deep .el-form-item__label{
  color: rgb(94,234,231);
}

.el-form-item {  
    margin-left: -30px; /* 你可以根据需要调整这个值 */  
}

.main-content {  
  height: 100vh; /* 设置容器高度为视口高度，以便内容垂直居中 */  
  background: url('@/assets/backgroud.png') no-repeat center center / cover ;
}  

.center-card { 
    color: rgb(245, 245, 245); 
    background-color: rgb(26, 68, 94);
    border-width: 0; 
  
} 

.custom-header {
  background-color: rgb(26, 68, 94);
  padding-top: 15px;
}


/* 其他样式 */

.el-main {
  --el-main-padding: 10px;
}
</style>